<script setup>
import { Plus, Search, UploadFilled } from '@element-plus/icons-vue';
import { ElMessageBox } from 'element-plus';
import { onMounted, ref } from 'vue';
import {get} from '../api/http'
import { useRouter } from 'vue-router';


const imageList = ref([])

const previewImageList = ref(["https://www.devcat.cn/res/img/photos/20230329080946.jpg","https://www.devcat.cn/res/img/photos/20230329080946.jpg","https://www.devcat.cn/res/img/photos/20230329080946.jpg"])

const subCount = ref(0)

const showDialog = ref(false)

const headers = {Authorization: localStorage.getItem("token")}

const uploadData = ref({'photoName':'上传图片','photoDescribe':'上传图片描述'})

const fileList = ref([])

const router = useRouter()

const initList = async () => {
    await getPhotos()
    let count = parseInt((window.innerWidth-10) / 220)
    subCount.value =  count - (imageList.value.length - count*(parseInt(imageList.value.length / count)))
}

const handleSuccess = () => {
    showDialog.value = false
    getPhotos()
    ElMessageBox.alert('上传成功','成功',{type:'success'})
}

const getPhotos = () => {
    previewImageList.value = []
    get('photo').then(res=>{
        if(res.statusCode == 10003){
            router.push('/login')
            return;
        }
        imageList.value = res.data.list
        res.data.list.forEach(element => {
            previewImageList.value.push(element.imagePath)
        });
    })
}

onMounted(()=>{
    initList()
    window.addEventListener('resize',()=>{
        initList()
    })
})

</script>

<template>
    <main v-blog-title data-title="相册">
        <div class="toolBar">
            <el-input :suffix-icon="Search" placeholder="关键字搜索" style="width: 300px; margin-right:10px;"></el-input>
            <el-button @click="showDialog=true" :icon="UploadFilled" type="primary">上传图片</el-button>
        </div>
        <div class="photoBox">
            <div v-if="imageList.length == 0" style="width:100%; text-align: center;">
                            <el-empty description="暂无任何图片"></el-empty>
                        </div>
            <div class="photoItem" v-for="item,index in imageList" :key="item.id">
                <el-image :initial-index="index" :preview-src-list="previewImageList" loading="lazy" style="width:200px; height:200px" fit="contain" :src="item.imagePath"></el-image>
                <div class="info">{{item.photoName}}</div>
            </div>
            <div style="width: 200px; height: 200px; margin: 10px;" v-for="item in subCount" :key="item"></div>
        </div>
        <el-dialog title="图片信息" v-model="showDialog">
            <el-form>
                <el-form-item>
                    <el-upload :on-success="handleSuccess" action="https://www.devcat.cn/sso/photo" :data="uploadData" :file-list="fileList" :headers="headers" list-type="picture-card">
                        <el-icon><Plus/></el-icon>
                    </el-upload>
                </el-form-item>
                <!-- <el-form-item label="图片名称"></el-form-item> -->
                <!-- <el-form-item label="描述信息"></el-form-item> -->
            </el-form>
        </el-dialog>
    </main>
</template>

<style scoped>
main{
    padding: 10px;
}
.toolBar{
    border-bottom: 1px solid #bbb;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
}
.photoBox{
    width: calc(100% - 20px);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 10px;

}
.photoItem{
    margin: 10px;
    cursor: pointer;
    background-color: #fff;
}
.info{
    text-align: center;
    color: #444;
}
.helpLayout{
    width: auto;
}
</style>